import Vue from 'vue'
// 引入 vue-router 模块
import Router from 'vue-router'

const Main = () => import('views/Main')
const Login = () => import('views/login/Login')
const Register = () => import('views/register/Register')

const Home = () => import("views/home/Home")
const Cart = () => import("views/cart/Cart")
const Category = () => import("views/category/Category")
const Profile = () => import("views/profile/Profile")
const Detail = () => import("views/detail/Detail")


// 安装插件 router
Vue.use(Router)

// 创建路由对象 导出router
const router = new Router({
  // base: 'App',
  // 配置路由和组件之间的应用关系
  routes: [
    { path: "/", redirect: '/main' },

    { path: '/login', component: Login },

    { path: '/register', component: Register },

    {
      path: '/main',
      component: Main,
      children: [
        { path: '/', redirect: 'home' },
        { name: "home", path: 'home', component: Home },
        { name: "cart", path: 'cart', component: Cart },
        { name: "profile", path: 'profile', component: Profile },
        { name: "category", path: 'category', component: Category },
        { name: "detail", path: 'detail/:iid', component: Detail }
      ]
    }
  ],
  // 使用 history 模式 默认是 hash 模式
  mode: 'history',
  // 指定当前活跃的 状态 类名
  linkActiveClass: "active"
})

// 前置钩子(hook 回调)  跳转前回调 必须要调用 next() 路由才能继续跳转
router.beforeEach((to, from, next) => {
  // 从 from 跳转到 to

  // document.title = to.matched[0].meta.title
  next()

})

// 后置钩子 跳转后回调  不需要 next 参数
router.afterEach((to, from) => {
  // 从 form 跳转到 to
  // console.log(to)
  // document.title = to.matched[0].meta.title
})

export default router